<script setup lang="ts">
import { computed, inject, ref, shallowRef, watchEffect } from "vue";
import { RangePicker, Select, TreeSelect } from "ant-design-vue";
import { SYMBOL_INDEX_PROVIDER } from "../constants";
import { storeToRefs } from "pinia";
import { DATE_FORMAT } from "@/const";
import { useCityRoadStore } from "@/store/city-road";
import { crossList } from "@/services/city-road";
import { useGlobalStore } from "@/store/global";
import { SYMBOL_MAP_TOOL_PROVIDER } from "@/const/symbol";

const tabs = [
    { value: 1, label: "路段" },
    { value: 2, label: "路口" },
];

const roadType = ref(tabs[0].value);
const tableData = shallowRef([]);
const titleRef = ref<HTMLElement>();
const containerRef = ref<HTMLElement>();

const { dateTypes } = storeToRefs(useGlobalStore());
const dateTypeOptions = computed(() =>
    dateTypes.value.map((e: any) => ({ label: e.label, value: e.code }))
);

const store = useCityRoadStore();
const {
    weekRange,
    currentRoad,
    checkedRoads,
    dateType,
    indexType,
    roads,
    startTime,
    endTime,
} = storeToRefs(store);

const options = computed(() =>
    roads.value.map((r: any) => ({ label: r.name, value: r.id, children: [] }))
);

function changeRoadType(tab: number) {
    roadType.value = tab;
}

const isSlow = computed(() => indexType.value === 1);

watchEffect(async () => {
    if (weekRange.value?.length !== 2) return;
    const [start, end] = weekRange.value;
    const api = roadType.value === 1 ? store.fetchRoads : crossList;
    const data = (await api({
        beginTime: start?.format(DATE_FORMAT) + " " + startTime.value + ":00",
        endTime: end?.format(DATE_FORMAT) + " " + endTime.value + ":00",
        dateType: dateType.value,
        indexType: indexType.value,
    })) as any;
    tableData.value = data || [];
});

const { driveMap, updateRoad } = inject<any>(SYMBOL_INDEX_PROVIDER);
function handleRowClick(row: any) {
    driveMap(row);
    // store.updateRoad(row);
}

function rowClassName(data: { row: any; rowIndex: number }) {
    if (data.row.id === currentRoad.value?.id) {
        return "row row-active";
    }
    return "row";
}

function vRoll(el: any) {
    if (!el) return;
    if (el.getBoundingClientRect()?.width < el.scrollWidth) {
        el.classList.add("rolling");
    } else {
        el.classList.remove("rolling");
    }
}

function getContainer(_: HTMLElement) {
    return titleRef.value as HTMLElement;
}
function getRoadSelectContainer(_: HTMLElement) {
    return titleRef.value as HTMLElement;
}
const change = (checkedRoads: any[], ret: any) => {
    store.updateCheckedRoads(checkedRoads, ret);
    updateRoad(checkedRoads);
};
</script>

<template>
    <div class="situation">
        <div class="road-select-wrap" ref="containerRef">
            <!-- <Select
        class="road-select"
        placeholder="全部干线"
        v-model:value="checkedRoads"
        :options="options"
        mode="multiple"
        @change="store.updateCheckedRoads"
        :get-popup-container="getRoadSelectContainer"
      /> -->
            <TreeSelect
                v-model:value="checkedRoads"
                class="road-select"
                :tree-data="options"
                tree-checkable
                allow-clear
                placeholder="全部干线"
                popupClassName="tree-popup"
                @change="change"
                :get-popup-container="getRoadSelectContainer"
            />
        </div>
        <h3 ref="titleRef">
            <RangePicker
                v-model:value="weekRange"
                :allow-clear="false"
                separator="~"
                class="date-picker"
                popup-class-name="date-picker-popper"
                picker="week"
                size="small"
                :get-popup-container="getContainer"
                @change="store.updateWeekRange"
            >
                <template v-slot:suffixIcon></template>
            </RangePicker>
            <Select
                v-model:value="dateType"
                :options="dateTypeOptions"
                size="small"
                class="select"
                :get-popup-container="getContainer"
                @change="store.updateDateType"
            />
            <!-- <TimePicker
                class="time-picker"
                :allow-clear="false"
                :show-now="false"
                format="HH:mm"
                :minute-step="15"
                popup-class-name="time-picker-popper"
                v-model:value="currentTime"
                size="small"
                placeholder=""
                :get-popup-container="getContainer"
            >
                <template #suffixIcon></template
            ></TimePicker> -->
        </h3>
        <div class="option-box">
            <ul class="tabs">
                <li
                    class="tab"
                    :class="{ active: roadType === tab.value }"
                    v-for="tab in tabs"
                    :key="tab.value"
                    @click="changeRoadType(tab.value)"
                >
                    {{ tab.label }}
                </li>
            </ul>

            <el-radio-group
                class="radio-group"
                v-model="indexType"
                @change="store.updateIndexType"
            >
                <el-radio :value="2" size="small">超速</el-radio>
                <el-radio :value="1" size="small">低速</el-radio>
            </el-radio-group>
        </div>

        <el-table
            ref="table"
            class-name="table"
            :data="tableData"
            size="small"
            :row-class-name="rowClassName"
            header-row-class-name="row-header"
            cell-class-name="table-cell"
            :cell-style="{ background: 'transparent' }"
            :header-cell-style="{ backgroundColor: 'rgba(255,255,255,0.17)' }"
            style="width: 100%"
            v-on:row-click="handleRowClick"
            height="calc(100vh - 300px)"
        >
            <el-table-column type="expand">
                <template #default="props">
                    <div
                        style="
                            color: #d2e7ea;
                            padding-left: 50px;
                            line-height: 20px;
                            height: 20px;
                        "
                    >
                        {{ props.row.name }}
                    </div>
                </template>
            </el-table-column>
            <el-table-column :width="50" prop="index" label="序号">
                <template #default="scope">
                    <span>{{ scope.$index + 1 }}</span>
                </template>
            </el-table-column>
            <el-table-column prop="name" label="干线名称">
                <template #default="scope">
                    <span v-roll class="roll-container">
                        <span>{{ scope.row.name }}</span>
                    </span>
                </template>
            </el-table-column>
            <el-table-column
                v-if="!isSlow"
                :width="90"
                prop="overSpeedRate"
                label="超速 (%)"
            ></el-table-column>
            <el-table-column
                :width="!isSlow ? 110 : 130"
                prop="speed"
                label="速度 (km/h)"
            ></el-table-column>
            <el-table-column
                :width="!isSlow ? 100 : 130"
                prop="timeInterval"
                label="时间段"
            ></el-table-column>
        </el-table>
    </div>
</template>

<style lang="scss" scoped>
.situation {
    margin-top: 30px;

    .road-select-wrap {
        position: absolute;
        top: 0;
        right: -160px;
        width: 140px;
        .road-select {
            width: 100%;
            :deep(.ant-select-selector) {
                border-color: #5978a4;
            }
        }
    }

    > h3 {
        $selectHeight: 30px;

        display: flex;
        align-items: center;
        justify-content: end;
        height: 38px;
        margin-bottom: 20px;
        background-image: url(@/assets/bg_title_city_road_situation.png);
        background-size: cover;

        :deep(.tree-popup) {
            .ant-select-tree-checkbox-inner {
                border-color: #5a6679;
                background: #9aa3b2;
            }
            .ant-select-tree-checkbox-checked .ant-select-tree-checkbox-inner {
                background: #3399ff !important;
                border-color: transparent;
            }
        }

        :deep(.date-picker) {
            --el-date-editor-width: 166px;
            --el-input-height: 24px;
            --el-font-size-base: 12px;
            --el-input-bg-color: #012039;
            --el-datepicker-inrange-bg-color: #012039;
            --el-datepicker-inrange-hover-bg-color: #012039;

            width: 166px;
            height: $selectHeight;
            padding: 0 10px 0 6px;
            background: #012039;
            color: #fff;
            border-color: #5978a4;
            &.ant-picker-focused {
                box-shadow: none;
            }

            input {
                font-size: 12px;
                text-align: center;
                color: #fff;
            }
            .ant-picker-clear {
                background: none;
            }
            .ant-picker-suffix {
                color: #fff;
            }
            .ant-picker-active-bar {
                display: none;
            }
            .ant-picker-range-separator {
                padding: 0;
                font-size: 12px;
            }
            .ant-picker-clear {
                color: #fff;
            }

            .el-range__icon {
                margin-right: 10px;
            }
        }

        :deep(.date-picker-popper) {
            --el-input-text-color: #fff;
            --el-bg-color-overlay: #012039;

            .el-date-range-picker__editor {
                --el-input-bg-color: #012039;
            }
            .el-date-table-cell {
                --el-datepicker-inrange-bg-color: #012039;
                --el-datepicker-inrange-hover-bg-color: #012039;
            }
        }

        :deep(.select) {
            width: 74px;
            margin-left: 10px;
            font-size: 12px;
            .ant-select-selector {
                align-items: center;
                height: $selectHeight;
                font-size: 12px;
                border-color: #5978a4;
            }
            .ant-select-arrow {
                color: #fff;
                font-size: 8px;
            }
            .ant-select-selection-item {
                text-align: left;
                line-height: $selectHeight;
                padding-inline-end: 12px !important;
            }
        }

        :deep(.ant-select-item) {
            font-size: 12px;
            padding: 2px 4px;
            min-height: unset;

            .ant-select-item-option-content {
                flex: unset;
            }
            &.ant-select-item-option-selected:not(
                    .ant-select-item-option-disabled
                ) {
                color: #012039;
                background: #0fb2ff;
            }
        }

        :deep(.time-picker) {
            width: 60px;
            height: $selectHeight;
            margin-left: 10px;
            border-color: #5978a4;

            input {
                font-size: 12px;
            }
        }

        :deep(.time-picker-popper) {
            .ant-picker-ok button,
            .ant-picker-time-panel-cell-selected
                .ant-picker-time-panel-cell-inner {
                color: #012039;
                background: #0fb2ff;
            }
            .ant-picker-ok button {
                box-shadow: none;
            }
        }
    }

    .option-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20px 0 14px;
        .tabs {
            overflow: hidden;
            display: flex;
            font-size: 13px;
            border-radius: 4px;
            background: url(@/assets/bg_button_group_small.png) no-repeat;
            background-size: 100% 100%;
            .tab {
                list-style: none;
                padding: 3px 9px;
                cursor: pointer;
                color: #0fb2ff;
                &.active {
                    color: #fff;
                    background: #0f3d5e;
                    box-shadow: inset 0px 0px 6px 0px rgba(0, 170, 255, 0.9);
                }
            }
        }
        .radio-group {
            --el-color-primary: #31f7ff;

            :deep(.el-radio) {
                margin-right: 20px;
                .el-radio__label {
                    padding-left: 4px;
                }
            }
        }
    }
}

.table {
    --el-table-tr-bg-color: transparent;
    --el-table-header-bg-color: transparent;
    --el-table-bg-color: transparent;
    --el-table-border-color: transparent;
    --el-table-header-text-color: #fff;
    --el-table-text-color: #fff;

    font-size: 14px;

    :deep(.el-table__row) {
        height: 38px;
    }

    :deep(.el-table__expanded-cell) {
        background: #163e5f;
    }

    :deep(.el-table__expand-icon) {
        width: 16px;
        height: 16px;
        content: url(@/assets/city-road/add.png) !important;
        transform: none;
        &.el-table__expand-icon--expanded {
            content: url(@/assets/city-road/sub.png) !important;
        }
        .el-icon {
            display: none !important;
        }
    }

    :deep(.row) {
        height: 30px;
        cursor: pointer;

        &.row-active,
        &:hover {
            background-color: #0b385e;
        }
    }

    // :deep(.row-header) {
    //   .cell {
    //     padding: 0;
    //   }
    // }

    :deep(.table-cell) {
        --el-color-primary: #31f7ff;

        .cell {
            // padding: 0;
            display: flex;
            align-items: center;
            // justify-content: center;
        }
    }

    :deep(.congestion-row .cell) {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    :deep(.sorting),
    :deep(.delay-col) {
        color: #31f7ff;
    }

    :deep(.not-sorting) {
        color: #fff;
    }

    .icon-rank {
        width: 20px;
        height: 24px;
        vertical-align: bottom;
    }

    .tag {
        padding: 0 12px;
        border-radius: 4px;
        border-width: 1px;
        border-style: solid;
        line-height: 20px;
        &.low {
            color: #ff0404;
            border-color: #ff0404;
            background: rgba(255, 47, 47, 0.2);
        }
        &.commonly {
            color: #ff606b;
            border-color: #ff606b;
            background: rgba(255, 96, 107, 0.2);
        }
        &.high {
            color: #4bf99b;
            border-color: #4bf99b;
            background: rgba(75, 249, 155, 0.2);
        }
    }

    .type {
        display: inline-flex;
        align-items: center;
        img {
            width: 14px;
            height: 14px;
            margin-left: 2px;
        }
    }
}

.roll-container {
    --animation-duration: 5s;

    display: inline-block;
    width: 100%;
    overflow: hidden;
    white-space: nowrap;

    &.rolling {
        span {
            display: inline-block;
            padding-left: 100%;
            animation: marquee var(--animation-duration) linear infinite;
        }
    }
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}
</style>
